<template>
    <div class="app"> 
        <div class="title-header">
            <div class="top">
                <div class="header-one">
                    <div class="left-sys"><img src="./../../assets/img/sys.png"></div>
                    <p>masterbuy</p>
                    <div  class="right-mess"><img src="./../../assets/img/Message.png"></div>
                </div>
                <div class="search"><input type="text" placeholder="请搜索"></div>
            </div>
            <div class="swipered">
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(image, index) in images" :key="index">
                        <img v-lazy="image" />
                    </van-swipe-item>
                </van-swipe> 
            </div>
            <div class="category">
                <div v-for="(category,index) in tempcategory" :key="index" @click="getproductlist(index,category.id)">
                    <p :class="index==active?'have-bottom':''">{{category.name}}</p>
                </div>
            </div>
            <div class="goodlist" v-if="tempgoodlist">
                <div class="goods" v-for="(category,index) in tempgoodlist" :key="index" @click="goproduct(category.id)">
                    <div class="imgs"><img :src="category.main_image"></div>
                    <p>{{category.detail}}</p>
                    <p class="pirce">￥{{category.price}}</p>
                </div>
            </div>
            <div  class="else" v-else>
                <p>暂无商品数据</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"app",
    data() {
        return {
            images: [
                'https://img.yzcdn.cn/vant/apple-1.jpg',
                'https://img.yzcdn.cn/vant/apple-2.jpg'
            ],
            tempcategory:[],
            active:0,
            categoryid:6,
            tempgoodlist:[]
        }
    },
    mounted(){
         this.init()
         this.initgooddata()
    },
    methods:{
        init(){
            this.$http({
                method:"get",
                url:this.$util.baseUrl+'app/getcateall',
            }).then((res)=>{
                if(res.data.code=800000){
                    this.tempcategory = res.data.data
                }
            })
        },
        initgooddata(){
            let data={
                id:this.categoryid
            }
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'app/getgoodlist',
                data:data
            }).then((res)=>{
                if(res.data.code=800000){
                    this.tempgoodlist = res.data.data
                }
            })
        },
        getproductlist(index,id){
            ///在这里调用接口，做一个获取商品接口
            let data={
                id:id
            }
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'app/getgoodlist',
                data:data
            }).then((res)=>{
                if(res.data.code=800000){
                    this.tempgoodlist = res.data.data
                }
                this.active = index
            })
        },
        goproduct(productid){
            let proids = this.$md5("222222"+productid)
            this.$router.push({
                path: 'describe',
                query: {
                    id: proids+"000cyf"+productid
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
       .title-header{
           width: 100%;
           border: 1px solid white;
           box-sizing: border-box;
           .top{
                background: white;
                position: fixed;
                width: 100%;
                z-index: 999;
           }
           .header-one{
                width: 100%;
                height: 100px;
                background: black;
                display: flex;
                justify-content: space-between;
                align-items: center;
                img{
                    width: 60px;
                    height: 60px;
                }
                .left-sys{
                    margin-left: 30px;  
                }
                .right-mess{
                    margin-right: 30px;
                }
                p{
                    color: white;
                }
           }
           .swipered{
               width: 90%;
               height: 300px;
               margin: auto; 
               border-radius: 20px;
               margin-top: 250px; 
               img{
                 width: 100%;
                 height: 300px;
                 border-radius: 20px; 
               }
           }
           .category{
               width: 100%;
               height: 80px;
               background: #cccccc;
               margin-top: 30px;
               display: flex;
               justify-content: space-around;
               align-items: center;
               font-size: 35px;
               color: white;
               .have-bottom{
                   color: red;
               }
           }
           .goodlist{
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                .goods{
                    width: 40%;
                    height: 400px;
                    background: #e0e0e0;
                    margin-top: 30px;
                    margin-left: 50px;
                    border-radius: 20px;
                    .imgs{
                        width: 100%;
                        height: 250px;
                        img{
                          width: 100%;
                          height: 100%; 
                          border-radius: 20px;
                        }
                    }
                    p{
                        font-size: 33px;
                        width: 85%;
                        margin: auto;
                        margin-top: 5px;
                    }
                    .pirce{
                        color: tomato;
                        font-size: 38px;
                        font-weight: 700;   
                        margin-top: 0px;
                    }
                }
                div:last-child{
                    margin-bottom: 160px;
                }
           }
           .else{
               font-size: 40px;
               p{
                   margin: auto;
                   margin-top: 150px;
                   text-align: center;
               }
           }
       }
       .search{
           width: 90%;
           height: 80px;
           margin: auto;
           margin-top: 30px;
           margin-bottom: 30px;
           input{
               display: block;
               width: 100%;
               height: 100%;
               font-size: 40px;
               border-radius: 10px;
               border: none;
               background: #e0e0e0;
               text-align: center;
           }
       }
</style>